{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点详情 - 旅游推荐系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
    <style>
        :root {
            --primary-color: #ff6b6b;
            --secondary-color: #48dbfb;
            --accent-color: #1dd1a1;
            --dark-color: #2f3640;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f6fa;
        }

        .navbar-custom {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .spot-header {
            height: 500px;
            position: relative;
            overflow: hidden;
            margin-bottom: 40px;
        }

        .spot-header img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.7);
        }

        .spot-title {
            position: absolute;
            bottom: 80px;
            left: 0;
            width: 100%;
            padding: 0 15%;
            color: white;
            text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
        }

        /* 其他样式与之前相同，省略以节省空间 */
    </style>
</head>
<body>
    <!-- 导航条 -->
    <nav class="navbar navbar-expand-lg navbar-dark navbar-custom sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fa fa-map-marked-alt"></i> 旅游推荐系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/homepage/"><i class="fa fa-home"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#"><i class="fa fa-compass"></i> 景点详情</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 景点内容将通过JavaScript动态加载 -->
    <div id="spot-container">
        <!-- 默认显示北京故宫内容 -->
        <div class="spot-header">
            <img id="spot-image" src="{% static 'img/BeijingGugong.jpg' %}" alt="北京故宫">
            <div class="spot-title">
                <h1 id="spot-name">北京故宫</h1>
                <p id="spot-description">探索千年古都的皇家气派与文化底蕴</p>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="spot-content">
                        <div class="spot-intro">
                            <h2><i class="fa fa-info-circle"></i> 景点介绍</h2>
                            <p id="spot-intro-text">故宫，又称紫禁城，是中国明清两代的皇家宫殿，位于北京中轴线的中心，是中国古代宫廷建筑之精华...</p>
                        </div>

                        <div class="spot-gallery">
                            <h2><i class="fa fa-images"></i> 景点图集</h2>
                            <div class="row" id="gallery-container">
                                <!-- 图片将通过JavaScript动态加载 -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="spot-content">
                        <div class="info-card">
                            <h3><i class="fa fa-clock"></i> 开放时间</h3>
                            <div id="opening-hours">
                                <!-- 开放时间将通过JavaScript动态加载 -->
                            </div>
                        </div>

                        <div class="info-card">
                            <h3><i class="fa fa-ticket-alt"></i> 门票信息</h3>
                            <div id="ticket-info">
                                <!-- 门票信息将通过JavaScript动态加载 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // 景点类
        class ScenicSpot {
            constructor(id, name, description, image, intro, gallery, openingHours, ticketInfo) {
                this.id = id;
                this.name = name;
                this.description = description;
                this.image = image;
                this.intro = intro;
                this.gallery = gallery;
                this.openingHours = openingHours;
                this.ticketInfo = ticketInfo;
            }

            render() {
                // 更新页面内容
                document.getElementById('spot-name').textContent = this.name;
                document.getElementById('spot-description').textContent = this.description;
                document.getElementById('spot-image').src = this.image;
                document.getElementById('spot-image').alt = this.name;
                document.getElementById('spot-intro-text').textContent = this.intro;

                // 更新图集
                const galleryContainer = document.getElementById('gallery-container');
                galleryContainer.innerHTML = '';
                this.gallery.forEach(image => {
                    galleryContainer.innerHTML += `
                        <div class="col-md-4">
                            <div class="gallery-item">
                                <img src="${image.url}" alt="${image.alt}">
                            </div>
                        </div>
                    `;
                });

                // 更新开放时间
                const openingHoursContainer = document.getElementById('opening-hours');
                openingHoursContainer.innerHTML = '';
                this.openingHours.forEach(item => {
                    openingHoursContainer.innerHTML += `
                        <div class="info-item">
                            <strong>${item.period}</strong>
                            <span>${item.time}</span>
                        </div>
                    `;
                });

                // 更新门票信息
                const ticketInfoContainer = document.getElementById('ticket-info');
                ticketInfoContainer.innerHTML = '';
                this.ticketInfo.forEach(item => {
                    ticketInfoContainer.innerHTML += `
                        <div class="info-item">
                            <strong>${item.type}</strong>
                            <span>${item.price}</span>
                        </div>
                    `;
                });
            }
        }

        // 北京故宫数据
        const beijingSpot = new ScenicSpot(
            1,
            '北京故宫',
            '探索千年古都的皇家气派与文化底蕴',
            "{% static 'img/BeijingGugong.jpg' %}",
            '故宫，又称紫禁城，是中国明清两代的皇家宫殿，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。',
            [
                { url: "{% static 'img/gugong1.jpg' %}", alt: '故宫全景' },
                { url: "{% static 'img/gugong2.jpg' %}", alt: '太和殿' },
                { url: "{% static 'img/gugong3.jpg' %}", alt: '角楼' }
            ],
            [
                { period: '旺季', time: '4月1日-10月31日 08:30-17:00' },
                { period: '淡季', time: '11月1日-3月31日 08:30-16:30' },
                { period: '周一', time: '闭馆（法定节假日除外）' }
            ],
            [
                { type: '旺季', price: '60元/人' },
                { type: '淡季', price: '40元/人' },
                { type: '珍宝馆', price: '10元/人' }
            ]
        );

        // 上海外滩数据
        const shanghaiSpot = new ScenicSpot(
            2,
            '上海外滩',
            '感受东方巴黎的现代魅力与历史风情',
            "{% static 'img/ShanghaiWaitan.jpg' %}",
            '外滩位于上海市黄浦区的黄浦江畔，即外黄浦滩，为中国历史文化街区。外滩矗立着52幢风格迥异的古典复兴大楼，素有外滩万国建筑博览群之称，是中国近现代重要史迹及代表性建筑，上海的地标之一。',
            [
                { url: "{% static 'img/waitan1.jpg' %}", alt: '外滩全景' },
                { url: "{% static 'img/waitan2.jpg' %}", alt: '外滩夜景' },
                { url: "{% static 'img/waitan3.jpg' %}", alt: '万国建筑' }
            ],
            [
                { period: '全天', time: '24小时开放' }
            ],
            [
                { type: '免费', price: '0元' }
            ]
        );

        // 成都大熊猫数据
        const chengduSpot = new ScenicSpot(
            3,
            '成都大熊猫基地',
            '邂逅国宝熊猫，体验川味慢生活',
            "{% static 'img/ChengduPanda.jpg' %}",
            '成都大熊猫繁育研究基地，是中国政府实施大熊猫等濒危野生动物迁地保护工程的主要研究基地之一，是我国乃至全球知名的集大熊猫科研繁育、保护教育、教育旅游、熊猫文化建设为一体的大熊猫等珍稀濒危野生动物保护研究机构。',
            [
                { url: "{% static 'img/panda1.jpg' %}", alt: '大熊猫' },
                { url: "{% static 'img/panda2.jpg' %}", alt: '熊猫幼崽' },
                { url: "{% static 'img/panda3.jpg' %}", alt: '熊猫基地' }
            ],
            [
                { period: '开放时间', time: '07:30-18:00' }
            ],
            [
                { type: '成人票', price: '55元/人' },
                { type: '学生票', price: '27元/人' }
            ]
        );

        // 承德避暑山庄数据
        const chengdeSpot = new ScenicSpot(
            4,
            '承德避暑山庄',
            '漫步皇家园林，领略山水画卷中的盛世遗韵与清凉雅趣',
            "{% static 'img/ChengdeBishushanzhuang.jpg' %}",
            '承德避暑山庄又名"承德离宫"或"热河行宫"，是世界文化遗产、国家AAAAA级旅游景区、全国重点文物保护单位、中国四大名园之一。山庄位于河北省承德市中心北部，武烈河西岸一带狭长的谷地上，是清代皇帝夏天避暑和处理政务的场所。',
            [
                { url: "{% static 'img/chengde1.jpg' %}", alt: '避暑山庄全景' },
                { url: "{% static 'img/chengde2.jpg' %}", alt: '湖区风光' },
                { url: "{% static 'img/chengde3.jpg' %}", alt: '宫殿区' }
            ],
            [
                { period: '旺季', time: '4月1日-10月31日 07:00-18:00' },
                { period: '淡季', time: '11月1日-3月31日 08:00-17:30' }
            ],
            [
                { type: '旺季', price: '130元/人' },
                { type: '淡季', price: '90元/人' }
            ]
        );

        // 景点数据映射
        const spots = {
            'beijing': beijingSpot,
            'shanghai': shanghaiSpot,
            'chengdu': chengduSpot,
            'chengde': chengdeSpot
        };

        // 页面加载时默认显示北京故宫
        document.addEventListener('DOMContentLoaded', function() {
            // 从URL参数获取景点ID，如果没有则默认显示北京
            const urlParams = new URLSearchParams(window.location.search);
            const spotId = urlParams.get('spot') || 'beijing';

            // 渲染对应景点
            if (spots[spotId]) {
                spots[spotId].render();
            } else {
                spots['beijing'].render(); // 默认显示北京
            }

            // 可以在这里添加事件监听器，比如点击按钮切换景点
            // document.getElementById('beijing-btn').addEventListener('click', () => beijingSpot.render());
            // document.getElementById('shanghai-btn').addEventListener('click', () => shanghaiSpot.render());
            // 等等...
        });
    </script>
</body>
</html>